<template>
  <div class="atrcle_box">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="atrcles.title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- /导航栏 -->

    <!-- 加载图标组件 -->
    <div class="loading-box" v-if="isloading">
      <div class="loading">
        <van-loading type="spinner" color="#1989fa" />
      </div>
    </div>
    <!-- /加载图标组件 -->

    <div v-else class="content">
      <!-- 标题 -->
      <div class="tatil-box markdown-body">
        <h3>{{ atrcles.title }}</h3>
      </div>
      <!-- /标题 -->

      <!-- 用户信息 -->
      <van-cell>
        <template v-slot:icon>
          <van-image width="50" height="50" :src="atrcles.aut_photo" round />
        </template>
        <template v-slot:title>
          <p>{{ atrcles.aut_name }}</p>
        </template>
        <template v-slot:label>
          <p>{{ atrcles.pubdate }}</p>
        </template>
        <!-- 关注按钮组件 -->
        <template v-slot:right-icon>
          <follow
            :isfolloed="atrcles.is_followed"
            :autid="atrcles.aut_id"
            @changfollow="atrcles.is_followed = $event"
          />
        </template>
        <!-- /关注按钮组件 -->
      </van-cell>
      <!-- /用户信息 -->

      <!-- 文章内容 -->
      <div
        ref="contentbox"
        class="atrcle-contenter markdown-body"
        v-html="atrcles.content"
      ></div>
      <van-divider>正文结束</van-divider>
      <!-- /文章内容 -->

      <!-- 底部功能导航栏 -->
      <div class="navbar">
        <div class="inoutbutotn">
          <van-button type="default" class="vanbutton" @click="show = !show"
            >写评论...</van-button
          >
          <div class="buttonbox">
            <van-icon
              class-prefix="iconfont icon-wenda"
              :badge="list.length"
              @click="show = !show"
            />
            <collect
              v-model="atrcles.is_collected"
              :class="atrcles.is_collected ? 'scstyle' : ''"
              :artid="atrcles.art_id"
            />
            <like
              :class="atrcles.attitude >= 1 ? 'scstyle' : ''"
              v-model="atrcles.attitude"
              :artid="atrcles.art_id"
            />
            <i class="iconfont icon-fenxiang"></i>
          </div>
        </div>
      </div>
      <!-- /底部功能导航栏 -->

      <!-- 评论弹出层组件 -->
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '15%' }"
        class="popupsty"
      >
        <commentpost :atrid="atrcles.art_id" @newcomment="setpopup" />
      </van-popup>
      <!-- /评论弹出层组件 -->

      <!-- 置顶图标 -->
      <transition name="van-slide-up">
        <van-icon name="back-top" v-on:click="top" v-show="istop" />
      </transition>
      <!-- /置顶图标 -->

      <!-- 评论列表组件 -->
      <comment
        :commentid="atrcles.art_id"
        @gettotal_count="totalcount = $event"
        :list="list"
      />
      <!-- /评论列表组件 -->
    </div>
  </div>
</template>

<script>
import { atrcle } from "@/api/user.js";
import { atrs } from "../../api/user";
import { ImagePreview } from "vant";
import follow from "@/views/home/components/follow.vue";
import collect from "@/views/home/components/collect.vue";
import like from "@/views/home/components/like.vue";
import comment from "./components/comment.vue";
import commentpost from "./components/commentpost.vue";
export default {
  components: {
    follow,
    collect,
    like,
    comment,
    commentpost,
  },
  data() {
    return {
      list: [], //评论列表
      show: false, //评论弹出层开关状态
      totalcount: 0, //评论总数
      istop: false, //置顶图标显隐
      active: 0, //底部功能导航栏索引
      isloading: true, //控制加载图标显影
      atrcles: {}, //文章数据
      loading: false, //按钮加载状态
    };
  },
  props: {
    atrcleID: {
      type: [String, Number, Object], //多类型
      require: true, //必填项
    },
  },
  mounted() {
    window.addEventListener("scroll", () => {
      if (window.scrollY > 492) {
        this.istop = true;
      } else {
        this.istop = false;
      }
    });
  },
  updated() {
    this.wacthimg();
  },
  created() {
    this.getatrcle(this.atrcleID);
  },
  methods: {
    // 获取文章数据函数 发ajax
    async getatrcle(id) {
      try {
        const { data: res } = await atrcle(id);
        this.atrcles = res.data;
        this.isloading = false;
        console.log(this.atrcles);
      } catch (err) {
        this.$toast("获取失败");
      }
    },
    // 图片预览函数
    wacthimg() {
      const imagesurl = [];
      const imgs = this.$refs.contentbox.querySelectorAll("img");
      imgs.forEach((img, index) => {
        imagesurl.push(img.src);
        img.onclick = () => {
          ImagePreview({
            images: imagesurl,
            startPosition: index,
          });
        };
      });
    },

    // 返回文章详细函数
    onClickLeft() {
      this.$router.back();
      // console.log(this);
    },
    // 页面滚动事件
    handleScroll: () => {
      console.log(this);
    },
    // 置顶函数
    top() {
      document.documentElement.scrollTop = 0;
    },
    // 评论弹出层
    setpopup($event) {
      this.show = !this.show;
      this.list.unshift($event.new_obj);
    },
  },
};
</script>

<style lang='less' scoped>
@import "./github-markdown.css";
.atrcle_box {
  background-color: #fff;
  /deep/ .van-nav-bar__text {
    color: #fff;
  }
  .van-button {
    top: 18px;
    width: 100px;
  }
  .atrcle-contenter {
    // word-wrap: break-word;
    // margin-bottom: 103px;

    background-color: #fff;
  }
  .tatil-box {
    text-align: center;
  }
  .van-divider {
    background-color: #fff;
  }
  .content {
    .van-icon-back-top {
      position: fixed;
      top: 900px;
      right: 20px;
      border: 3px solid black;
      border-radius: 50%;
      z-index: 999999;
    }
  }
  .navbar {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1;
    height: 100px;
    width: 100%;
    background-color: #fff;
    .inoutbutotn {
      display: flex;
      width: 100%;
      height: 100%;

      .vanbutton {
        flex: 1;
        // width: 40%;
        height: 70px;
        border-radius: 10px;
        border: 1px solid black;
        color: gray;
      }
      .buttonbox {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex: 2;
        // width: 60%;
        height: 100%;
        .iconfont {
          position: relative;
        }
        i {
          display: inline-block;
          width: 55px;
          height: 55px;
        }
        .scstyle {
          color: orange;
        }
      }
    }
  }
}
.loading-box {
  position: relative;
  height: 200px;
  .loading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    padding-left: 30px;
  }
}
</style>